<template>
  <a-upload
    v-model:file-list="fileList"
    name="file"
    class="avatar-uploader"
    :show-upload-list="false"
    :action="uploaddUrl"
    :before-upload="beforeUpload"
    :headers="uploadHeaders"
    @change="handleChange"
    v-if="type == 'upload'"
  >
<embed v-if="imageUrl" :src="base_url + imageUrl" type="application/pdf" width="100%" height="100%" />
    <div v-else>
      <loading-outlined v-if="loading"></loading-outlined>
      <plus-outlined v-else style="font-size: 40px"></plus-outlined>
    </div>
  </a-upload>
  <img v-else :src="imageUrl" class="omg" />
</template>
<script lang="ts">
import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { defineComponent, ref, reactive, watch } from "vue";
import type { UploadChangeParam, UploadProps } from "ant-design-vue";
import { getToken } from "/@/utils/auth/index";
function getBase64(img: Blob, callback: (base64Url: string) => void) {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result as string));
  reader.readAsDataURL(img);
}
export const uploadUrl = `${window.config.base_url}/files/upload/image`
export default defineComponent({
  components: {
    LoadingOutlined,
    PlusOutlined,
  },
  props: {
    type: {
      type: String,
      default: "upload",
    },
    uploadUrl: {
      type: String,
      default: "http://47.102.152.4:28005/files/upload/image",
    },
    base_url: {
      type: String,
      default: "http://47.102.152.4:28005",
    },
    value: {
      type: String,
      default: "",
    },
  },
  emits: ["changeValuie", "change"],
  setup(props, { emit }) {
    const fileList = ref([]);
    const loading = ref<boolean>(false);
    const imageUrl = ref<string>(props.value);
    const { type } = props;
    const uploaddUrl = ref<string>("");
    const base_url = window.config.base_url;
    const uploadHeaders = reactive({
      Authorization: getToken(),
    });
    watch(
      () => props.value,
      (newVal) => {
        imageUrl.value = newVal;
      }
    );

    uploaddUrl.value = uploadUrl;
    function handleChange(info: UploadChangeParam) {
      if (info.file.status === "uploading") {
        loading.value = true;
        return;
      }
      if (info.file.status === "done") {
        // Get this url from response in real world.
        imageUrl.value = info.file.response.data;
        loading.value = false;
        emit("changeValuie", info.file.response.data);
        emit("change", info.file.response.data);
      }
      if (info.file.status === "error") {
        loading.value = false;
        message.error("upload error");
      }
    }

    const beforeUpload = (file: UploadProps["fileList"][number]) => {
      console.log('pdf',file.type)
      const isJpgOrPng = file.type === "application/pdf" || file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        message.error("只能上传pdf、JPG、PNG格式的文件!");
      }
      return isJpgOrPng;
    };

    return {
      fileList,
      loading,
      imageUrl,
      uploaddUrl,
      uploadHeaders,
      base_url,
      type,
      handleChange,
      beforeUpload,
    };
  },
});
</script>
<style>
.omg {
  width: 78px;
  height: 78px;
}
.avatar-uploader > .ant-upload {
  width: 78px;
  height: 78px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
